<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>前端开发</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
    <style>
        .font {
            font-family: 黑体;
            font-weight: normal;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <header>
                <h1 align="center">{{name}}</h1>
                <h4 align="center">考试时间：{{time}} 考试总分：{{paperStructures.questionTotalScore}}</h4>
            </header>
        </div>
        <p>
            <label>一、选择题（每题{{singleScore}}分，共{{paperStructures.singleChoiceScore}}分）</label><br>
            <ol>
                <li v-for="(singleChoices,index) in singleChoicess">
                    <label class="font">{{singleChoices.content}}</label><br>
                    <div v-for="(question,index) in questionss">
                        <input type="hidden" v-if="singleChoices.id==question.singleChoiceId" :data-index="singleChoices.id" :value="question.questionNum" id="singleChoiceNum[singleChoices.id]">
                        <input type="hidden" v-if="singleChoices.id==question.singleChoiceId" :data-indexs="singleChoices.id" :value="question.paperId" id="singleChoiceNums[index]">
                    </div>
                    <input type="radio" :data-single="singleChoices.id" :name="index" value="A">（A）{{singleChoices.optiona}}<br>
                    <input type="radio" :data-single="singleChoices.id" :name="index" value="B">（B）{{singleChoices.optionb}}<br>
                    <input type="radio" :data-single="singleChoices.id" :name="index" value="C">（C）{{singleChoices.optionc}}<br>
                    <input type="radio" :data-single="singleChoices.id" :name="index" value="D">（D）{{singleChoices.optiond}}<br>
                    <label>答案:{{singleChoices.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{singleChoices.answerDetail}}</label>
                </li>
                <!-- <li>
             Java语言支持：<br>
             <input type="radio" name="key2.2" value="A">（A）单继承<br>
             <input type="radio" name="key2.2" value="B">（B）多继承<br>
             <input type="radio" name="key2.2" value="C">（C）单继承和多继承都支持<br>
             <input type="radio" name="key2.2" value="D">（D）单继承和多继承都不支持<br>
         </li>-->
            </ol>
        </p>
        <p>
            <label>二、多选题（每题{{multipleChoiceScores}}分，共{{paperStructures.multipleChoiceScore}}分）</label><br>
            <ol>
                <li v-for="(multipleChoices,index) in multipleChoicess">
                    <label class="font">{{multipleChoices.content}}</label><br>
                    <div v-for="(question,index) in questionss">
                        <input type="hidden" v-if="multipleChoices.id==question.multipleChoiceId" :data-multiple="multipleChoices.id" :value="question.questionNum">
                        <input type="hidden" v-if="multipleChoices.id==question.multipleChoiceId" :data-multiples="multipleChoices.id" :value="question.paperId">
                    </div>
                    <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="A">（A）{{multipleChoices.optiona}}<br>
                    <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="B">（B）{{multipleChoices.optionb}}<br>
                    <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="C">（C）{{multipleChoices.optionc}}<br>
                    <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="D">（D）{{multipleChoices.optiond}}<br>
                    <label>答案:{{multipleChoices.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{multipleChoices.answerDetail}}</label>
                </li>
                <!-- <li>
             Java语言支持：<br>
             <input type="checkbox" name="key2.2" value="A">（A）单继承<br>
             <input type="checkbox" name="key2.2" value="B">（B）多继承<br>
             <input type="checkbox" name="key2.2" value="C">（C）单继承和多继承都支持<br>
             <input type="checkbox" name="key2.2" value="D">（D）单继承和多继承都不支持<br>
         </li>-->
            </ol>
        </p>
        <p>
            <label>三、判断题（每题{{trueOrFalseScores}}分，共{{paperStructures.trueOrFalseScore}}分）</label><br>
            <ol>
                <li v-for="(trueOrFalses,index) in trueOrFalsess">
                    <label class="font">{{trueOrFalses.content}}</label>
                    <span v-for="(question,index) in questionss">
                <input type="hidden" v-if="trueOrFalses.id==question.trueOrFalseId" :data-trueOrFalses="trueOrFalses.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="trueOrFalses.id==question.trueOrFalseId"
                       :data-trueOrFalsess="trueOrFalses.id"
                       :value="question.paperId">
            </span>
                    <input type="radio" :data-trueOrFalse="trueOrFalses.id" value="1" style="margin-left: 10px">对
                    <input type="radio" :data-trueOrFalse="trueOrFalses.id" value="0" style="margin-left: 5px">错
                    <label v-if="trueOrFalses.answer==0">答案:对&nbsp;&nbsp;&nbsp;&nbsp;详情:{{trueOrFalses.answerDetail}}</label>
                    <label v-if="trueOrFalses.answer==1">答案:错&nbsp;&nbsp;&nbsp;&nbsp;详情:{{trueOrFalses.answerDetail}}</label>
                    <br>
                </li>
                <!-- <li>
             在状态图中，终止状态在一个状态图中允许有任意多个。
             <input type="radio" name="key4.2" value="true">对
             <input type="radio" name="key4.2" value="false">错
             <br>
         </li>-->
            </ol>
        </p>
        <p>
            <label>四、填空题（每空{{completionScores}}分，共{{paperStructures.completionScore}}分）</label><br>
            <ol id="inputbox">
                <li v-for="(blankFillings,index) in blankFillingss">
                    <label class="font">{{blankFillings.content}}</label>
                    <span v-for="question in questionss">
                <input type="hidden" v-if="blankFillings.id==question.blankFillingId" :data-blank="blankFillings.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="blankFillings.id==question.blankFillingId" :data-blanks="blankFillings.id"
                       :value="question.paperId">
            </span>
                    <input type="text" :data-blankFillings="blankFillings.id" style="border: none;border-bottom: 1px solid;outline: none; width: 150px;" name="key1.1" value=""><br>
                    <label>答案:{{blankFillings.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{blankFillings.answerDetail}}</label>
                </li>
                <!--<li>
            对象最突出的特征是
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.1"
                   value="">
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.2"
                   value="">
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.3"
                   value="">
            <br>
        </li>-->
            </ol>
        </p>
        <p>
            <label>五、简答题（每空{{answerScores}}分，共{{paperStructures.answerScore}}分）</label><br>
            <ol>
                <li v-for="(shortAnswers,index) in shortAnswerss">
                    <label class="font">{{shortAnswers.content}}</label><br>
                    <div v-for="question in questionss">
                        <input type="hidden" v-if="shortAnswers.id==question.shortAnswerId" :data-short="shortAnswers.id" :value="question.questionNum">
                        <input type="hidden" v-if="shortAnswers.id==question.shortAnswerId" :data-shorts="shortAnswers.id" :value="question.paperId">
                    </div>
                    <textarea name="key5.1" style="outline: none;" value="" :data-shortAnswers="shortAnswers.id" rows="5" cols="30"></textarea>
                    <br>
                    <label>答案:{{shortAnswers.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{shortAnswers.answerDetail}}</label>
                </li>
            </ol>
        </p>
        <button class="btn btn-primary" @click="printPaper()">打印</button>
        <a type="button" class="btn btn-success" onclick="window.history.go(-1);" style="margin-left: 50%;">返回</a>
        <a class="btn btn-success" :href="downhref">下载</a>
        <a class="btn btn-success" :href="downhref1">下载1</a>
        <br>
        <hr>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                id: "",
                singleChoicess: [],
                multipleChoicess: [],
                blankFillingss: [],
                shortAnswerss: [],
                trueOrFalsess: [],
                paperStructures: [],
                singleScore: "",
                answerScores: "",
                completionScores: "",
                multipleChoiceScores: "",
                questionTotalScores: "",
                trueOrFalseScores: "",
                questionss: [],
                answerQuestion: [],
                time: "",
                name: "",
                question: [],
                answer: [],
                storage: undefined,
                token: "",
                refreshToken: "",
                downhref: "",
                downhref1: "",
            },
            mounted() { //当页面元素加载之前执行
                var id = window.location.href.split("=")[1];
                this.id = id;
                this.storage = window.localStorage;
                this.token = this.storage.getItem("token");
                this.refreshToken = this.storage.getItem("refreshToken");
                axios.get("/paper/fullPaper/" + id, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    })
                    .then(res => {
                        console.info(res);
                        this.question = res.data.data;
                        this.time = res.data.data.time;
                        this.name = res.data.data.name;
                        this.singleChoicess = res.data.data.singleChoices;
                        this.multipleChoicess = res.data.data.multipleChoices;
                        this.blankFillingss = res.data.data.blankFillings;
                        this.trueOrFalsess = res.data.data.trueOrFalses;
                        this.shortAnswerss = res.data.data.shortAnswers;
                        this.paperStructures = res.data.data.paperStructure;
                        this.singleScore = this.paperStructures.singleChoiceScore / this.paperStructures.singleChoiceNum;
                        this.answerScores = this.paperStructures.answerScore / this.paperStructures.answerNum;
                        this.completionScores = this.paperStructures.completionScore / this.paperStructures.completionNum;
                        this.multipleChoiceScores = this.paperStructures.multipleChoiceScore / this.paperStructures.multipleChoiceNum;
                        this.questionTotalScores = this.paperStructures.questionTotalScore / this.paperStructures.questionTotalNum;
                        this.trueOrFalseScores = this.paperStructures.trueOrFalseScore / this.paperStructures.trueOrFalseNum;
                        this.questionss = res.data.data.questions;
                        // console.log(this.singleScore);
                        // console.log(this.singleChoicess);
                        // console.log(this.name);
                        // console.info(this.time);
                        // axios.get("/getAnswer/" + this.p)
                        //     .then(res => {
                        //         this.answer = res.data.data;
                        //         let ques = this.questionss;
                        //         for (let i = 0; i < ques.length; i++) {
                        //             if (ques[i].singleChoiceId != 0) {
                        //                 let single = $("input[data-index=" + ques[i].singleChoiceId + "]")[0];
                        //                 let singles = $("input[data-single=" + ques[i].singleChoiceId + "]");
                        //                 for (let j = 0; j < singles.length; j++) {
                        //                     singles[j].disabled = true;
                        //                     if (singles[j].value == this.answer[i].answer) {
                        //                         singles[j].checked = true;
                        //                     }
                        //                 }
                        //             }
                        //             if (ques[i].multipleChoiceId != 0) {
                        //                 let multiple = $("input[data-multiple=" + ques[i].multipleChoiceId + "]")[0];
                        //                 let multiples = $("input[data-multipless=" + ques[i].multipleChoiceId + "]");
                        //                 for (let j = 0; j < multiples.length; j++) {
                        //                     console.info(multiples.length + "+" + ques[i].multipleChoiceId);
                        //                     multiples[j].disabled = true;
                        //                     if (this.answer[i].answer.match(multiples[j].value)) {
                        //                         multiples[j].checked = true;
                        //                     }
                        //                 }
                        //             }
                        //             if (ques[i].trueOrFalseId != 0) {
                        //                 let trueOrFalses = $("input[data-trueOrFalse=" + ques[i].trueOrFalseId + "]");
                        //                 for (let j = 0; j < trueOrFalses.length; j++) {
                        //                     console.info(trueOrFalses.length + "+" + ques[i].trueOrFalseId);
                        //                     trueOrFalses[j].disabled = true;
                        //                     if (this.answer[i].answer == trueOrFalses[j].value) {
                        //                         trueOrFalses[j].checked = true;
                        //                     }
                        //                 }
                        //             }
                        //             if (ques[i].blankFillingId != 0) {
                        //                 let blankFillings = $("input[data-blankFillings=" + ques[i].blankFillingId + "]");
                        //                 console.info(blankFillings);
                        //                 for (let j = 0; j < blankFillings.length; j++) {
                        //                     console.info(blankFillings.length + "+" + ques[i].blankFillingId);
                        //                     blankFillings[j].disabled = true;
                        //                     blankFillings[j].value = this.answer[i].answer;
                        //                 }
                        //             }
                        //             if (ques[i].shortAnswerId != 0) {
                        //                 let shortAnswer = $("textarea[data-shortAnswers=" + ques[i].shortAnswerId + "]");
                        //                 console.info(shortAnswer);
                        //                 for (let j = 0; j < shortAnswer.length; j++) {
                        //                     console.info(shortAnswer.length + "+" + ques[i].shortAnswerId);
                        //                     shortAnswer[j].disabled = true;
                        //                     shortAnswer[j].value = this.answer[i].answer;
                        //                 }
                        //             }
                        //         }
                        /*let single = $("input[data-index=" + singleId + "]")[0];
                        let multiple = $("input[data-multiple=" + multipleId + "]")[0];
                        let short = $("input[data-short=" + shortId + "]")[0];
                        let trueOrFalse = $("input[data-trueOrFalses=" + trueOrFalseId + "]")[0];
                        let blank = $("input[data-blank=" + blankId + "]")[0];
                        console.info(single, multiple, short, trueOrFalse, blank);*/
                        //});
                    });

            },
            methods: {
                returnHtml: function() {
                    window.location.href = "./index.html";
                },
                printPaper: function() {
                    this.storage = window.localStorage;
                    //  this.token = this.storage.getItem("token");
                    //  this.refreshToken = this.storage.getItem("refreshToken");
                    console.info(this.id + ":" + this.name)
                    axios.post("/paper/printPaper/" + this.id, {
                        responseType: 'blob',
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        // console.info(res);
                        // var url = res.data.data;
                        // var url1 = url.substring(1, url.length);
                        // console.info(url1);

                        // this.downhref = url1;
                        // var url2 = "file://" + url1;
                        // this.downhref1 = url2;
                        // console.info(url2);
                        // alert(this.downhref);

                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = window.URL.createObjectURL(new Blob([res.data]));
                        link.setAttribute("download", this.name + ".pdf");
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href);
                        document.body.removeChild(link);
                        // var url1 = res.data.message;
                        // var url2 = url1.substring(1, url1.length);
                        // window.open(url2, "_blank");
                    })

                }
            }


        })
    </script>
</body>

</html>